import React, { Component, Fragment } from 'react'
import { Switch, Route, Redirect } from 'react-router-dom'
import { connect } from 'react-redux'
import Layout from './Layout'

import './Base.less'

import routes from './routes'
//用户Layout
const userLayout = routes.filter(route => {
  return route.role.includes('user')
})
//管理员Layout
const adminLayout = routes.filter(route => {
  return route.role.includes('admin')
})

const mapState = state => {
  return {
    // hasLogin: true,
    hasLogin: state.user.haslogin,
    roleId: state.user.role_id
  }
}

@connect(mapState)
export default class App extends Component {
  render() {
    return (
      <Fragment>
        <Switch>
          <Route
            key="/admin"
            path="/admin"
            render={routerProps => {
              //判断是否登录,登录了按角色渲染,否则到登录页
              return this.props.hasLogin ? (
                <Layout
                  roleLayout={
                    this.props.roleId === 2 ? adminLayout : userLayout
                  }
                />
              ) : (
                <Redirect to="/login" />
              )
            }}
          />
        </Switch>
      </Fragment>
    )
  }
}
